<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {% load static %}
    <link rel="stylesheet" href="{% static 'bootstrap-3.4.1-dist/css/bootstrap.min.css' %}">
    <script src="{% static 'js/jquery-3.7.1.min.js' %}"></script>
    <script src="{% static 'bootstrap-3.4.1-dist/js/bootstrap.min.js' %}"></script>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-offset-2 col-md-8">
            <h1 class="text-center">注册</h1>
            <form id="myform">  {# 这里只用form标签, 不利用提交方式 #}
                {% csrf_token %}
                {% for form in form_obj %}
                    <div class="form-group">
                        {# label标签绑定input框的id,由form自动生成 #}
                        <label for="{{ form.auto_id }}">{{ form.label }}</label>
                        {{ form }}
                        <span style="color: red">{{ form.errors.0 }}</span>
                    </div>
                {% endfor %}
                <div class="form-group">
                    <label for="myfile">头像
                        <br>
                        <img id="myimg" src="{% static 'images/default.png' %}" alt="" width="200px">
                    </label>
                    <input type="file" id="myfile" name="avatar" style="display:none;">
                </div>
                <input type="button" class="btn btn-primary pull-right" value="注册" id="id_commit">
            </form>
        </div>
    </div>
</div>

<script>
    {# change事件:随着标签内容变化触发执行 #}
    $('#myfile').change(function () {
        {# 修改图片src属性为用户选择的图片 #}
        // 1.生成一个文件阅读器对象
        let fileReaderObj = new FileReader();
        // 2.获取用户上传的图片对象
        let fileObj = $('#myfile')[0].files[0];
        // 3.将文件对象交给文件阅读器对象读取(异步操作)
        fileReaderObj.readAsDataURL(fileObj);
        // 4.等待文件阅读器读取完毕,修改图片src属性
        fileReaderObj.onload = function () {
            $('#myimg').attr('src', fileReaderObj.result)
        }
    });

    // 利用FormData对象发送ajax请求将数据传递给后端
    $('#id_commit').click(function () {
        // 1.产生formdata对象
        let formDataObj = new FormData();
        // 2.添加普通键值对数据(循环遍历从form表单中拿到的字典数据,添加到formDataObj中)
        // $('#myform').serializeArray():获取到form表单中所有的普通键值对存放在列表中(列表套字典的格式)
        // each(可迭代对象, 函数(索引, 循环遍历的数据)):循环遍历可迭代对象,传给函数执行
        $.each($('#myform').serializeArray(), function (index, obj) {
            // index:1 obj:{name: 'username', value: 'xixi'}
            formDataObj.append(obj.name, obj.value)
        });
        // 3.添加文件数据
        formDataObj.append('avatar', $('#myfile')[0].files[0]);
        // 4.发送ajax请求
        $.ajax({
            url: '',
            type: 'post',
            data: formDataObj,
            // 需要指定两个重要的参数
            processData: false,
            contentType: false,
            success: function (args) {
                if (args.code === 1) {
                    // 注册成功,重定向到登录页面
                    window.location.href = args.url
                    console.log('注册成功')
                } else {
                    // 注册失败,将报错信息展示到对应的input框后面的span标签
                    $.each(args.msg, function (index, obj) {
                        // {'username':'[报错原因]', '..': '[]'}
                        // index:username obj:['用户名不能为空']
                        console.log(index, obj)
                        let target_id = '#id_' + index;  // #id_username
                        // next():获取同级别下一个标签
                        // text():括号内不传参就是获取标签内部文本, 传参就是给标签传文本
                        $(target_id).next().text(obj[0]).parent().addClass('has-error')
                    })
                }
            }
        })
    })

    // 给所有input框绑定聚焦事件,当用户聚焦到某个input框时,报错信息要清除
    $('input').focus(function () {
        $(this).next().text('').parent().removeClass('has-error')
    })
</script>
</body>
</html>